<template>
  <view class="index-container">
    <!--banner-->
    <image class="banner-image" src="/static/index/banner.png" mode="aspectFit" />
    <!-- 私教 团操 单车 活动 -->
    <view class="image-row">
      <view class="image-text-container" v-for="(item, index) in imageTextList" :key="index">
        <image :src="item.imageSrc" :alt="item.text" />
        <text>{{ item.text }}</text>
      </view>
    </view>
    <!-- 热门课程  -->
    <view class="course-header">
      <text class="hot-course-title">热门课程</text>
      <text class="more-course">更多课程</text>
    </view>
    <view class="hot-container">
      <!-- 课程信息遍历 -->
      <scroll-view scroll-x class="horizontal-scroll" :scroll-with-animation="true">
        <view v-for="(item, index) in listData" :key="index" class="scroll-item">
          <image :src="item.image" mode="scaleToFill" class="item-image" :alt="item.desc"></image>
          <text class="item-desc">{{ item.desc }}</text>
          <view class="tag-container">
            <text class="tag" v-for="(tag, i) in item.tags" :key="i">{{ tag }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 推荐教练 -->
    <view class="course-header">
      <text class="hot-course-title">推荐教练</text>
      <text class="more-course">更多教练</text>
    </view>
    <view class="hot-container">
      <!-- 教练信息遍历 -->
      <scroll-view scroll-x class="horizontal-scroll" :scroll-with-animation="true">
        <view v-for="(item, index) in coathData" :key="index" class="scroll-item-coath">
          <image :src="item.image" mode="aspectFit" class="item-image" :alt="item.name"></image>
          <image :src="item.tags" mode="aspectFit" class="item-image-tag" :alt="item.name"></image>
          <text class="item-desc">{{ item.name }}</text>
          <text class="item-desc">{{ item.desc }}</text>
        </view>
      </scroll-view>
    </view>
    <!-- 精彩活动 -->
    <view class="course-header">
      <text class="hot-course-title">精彩活动</text>
      <text class="more-course">更多活动</text>
    </view>
    <!-- 活动信息遍历 -->
    <scroll-view scroll-x class="horizontal-scroll" :scroll-with-animation="true">
      <view v-for="(item, index) in activeData" :key="index" class="scroll-item-active">
        <image :src="item.image" mode="aspectFit" class="item-image" :alt="item.name"></image>
        <text class="item-name">{{ item.name }}</text>
        <text class="item-time">报名时间：{{ item.startTime }} - {{ item.endTime }}</text>
      </view>
    </scroll-view>
    <!-- 附近门店 -->
    <view class="course-header">
      <text class="hot-course-title">附近门店</text>



      <text class="more-course">全部门店</text>
    </view>
    <!-- 附近门店信息 -->
    <scroll-view class="store-scroll-container" scroll-y @scrolltolower="loadMore">
      <view class="store-list-container">
        <view class="store-container" v-for="(store, index) in stores" :key="index">
          <view class="store-header">
            <image class="location-icon" src="/static/index/热门课程.png" mode="aspectFit"></image>
            <view class="store-info">
              <view class="store-name-row">
                <text class="store-name">{{ store.name }}</text>
                <text class="store-distance">{{ store.distance }}</text>
              </view>
              <text class="store-address">{{ store.address }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载状态 -->
      <view class="loading-container" v-if="loading">
        <up-loadmore :status="loding"></up-loadmore>
      </view>
      <view class="no-more-container" v-if="noMore">
        <up-loadmore :status="noth"></up-loadmore>
      </view>
    </scroll-view>

    <!-- 自定义tabbar组件 -->
    <customTabBar />
  </view>
</template>

<script>
import customTabBar from "@/components/custom-tab-bar/index.vue"
export default {
  components: {
    customTabBar
  },
  data() {
    return {
      title: '测试',
      imageTextList: [
        { imageSrc: '/static/index/私教.png', text: '私教' },
        { imageSrc: '/static/index/团操.png', text: '团操' },
        { imageSrc: '/static/index/单车.png', text: '单车' },
        { imageSrc: '/static/index/活动.png', text: '活动' }
      ],
      listData: [
        {
          image: '/static/index/热门课程.png',
          desc: '全身燃脂瑜伽',
          tags: ['减脂', '体态纠正']
        },
        {
          image: '/static/index/热门课程.png',
          desc: '哑铃手臂核心肌群轰炸训练',
          tags: ['减脂', '增肌']
        },
        {
          image: '/static/index/热门课程.png',
          desc: 'HIIT适应性训练',
          tags: ['高速燃脂', '增肌']
        }
        // 更多数据...
      ],
      coathData: [
        {
          image: '/static/index/推荐教练.png',
          name: '小张',
          desc: '全国搏击比赛冠军',
          tags: '/static/index/搏击.png'
        },
        {
          image: '/static/index/推荐教练.png',
          name: '小吴',
          desc: '职业国家增肌教练',
          tags: '/static/index/增肌.png'
        },
        {
          image: '/static/index/推荐教练.png',
          name: '小李',
          desc: '全国塑形冠军',
          tags: '/static/index/塑形.png'
        },
        {
          image: '/static/index/推荐教练.png',
          name: '小刘',
          desc: '最美教练',
          tags: '/static/index/塑形.png'
        }
      ],
      activeData: [
        {
          image: '/static/index/精彩活动.png',
          name: 'LikingFit | 环千湖马拉松',
          startTime: '09-01',
          endTime: '09-10'
        },
        {
          image: '/static/index/精彩活动.png',
          name: '明星教你如何高效减脂',
          startTime: '09-01',
          endTime: '09-10'
        },
        {
          image: '/static/index/精彩活动.png',
          name: '世纪公园5公里夜跑活动',
          startTime: '09-01',
          endTime: '09-10'
        }
      ],
      stores: [
        {
          name: '武汉千图店',
          distance: '距您最近4.7km',
          address: '武汉市洪山区幸福路千图店A栋15-3'
        },
        {
          name: '武汉光谷店',
          distance: '距您5.2km',
          address: '武汉市洪山区光谷大道光谷店B栋20-5'
        },
        {
          name: '武汉江汉店',
          distance: '距您6.8km',
          address: '武汉市江汉区解放大道江汉店C栋12-8'
        },
        {
          name: '武汉汉口店',
          distance: '距您7.3km',
          address: '武汉市汉口区中山大道汉口店D栋18-2'
        },
        {
          name: '武汉武昌店',
          distance: '距您8.1km',
          address: '武汉市武昌区武昌大道武昌店E栋25-4'
        }
      ],
      page: 1,
      pageSize: 5,
      loading: false,
      noMore: false,
      scrollTimer: null,
      loding: 'loading',
      noth: 'nomore'
    }
  },
  onLoad() { },
  onShow() {
    // 页面显示时触发事件，通知tabbar更新状态
    uni.$emit('onShow');
  },
  beforeDestroy() {
    // 清除滚动防抖定时器
    if (this.scrollTimer) {
      clearTimeout(this.scrollTimer);
    }
  },
  methods: {
    loadMore() {
      // 如果正在加载或没有更多数据，则直接返回
      if (this.loading || this.noMore) return;

      this.loading = true;

      // 模拟异步加载数据
      setTimeout(() => {
        // 模拟新的门店数据
        const newStores = [];
        for (let i = 0; i < this.pageSize; i++) {
          const index = (this.page - 1) * this.pageSize + i + 1;
          newStores.push({
            name: `武汉门店${index}`,
            distance: `距您${(index + 3).toFixed(1)}km`,
            address: `武汉市洪山区幸福路门店${index}栋${index + 10}-3`
          });
        }

        // 添加新数据到列表
        this.stores = [...this.stores, ...newStores];

        // 更新页码
        this.page++;

        // 模拟没有更多数据的情况（当加载了3页数据后）
        if (this.page > 3) {
          this.noMore = true;
        }

        this.loading = false;
      }, 1000);
    }

  },
}
</script>

<style>
.index-container {
  background-color: #2e2f34;
  min-height: 100vh;
  padding: 10rpx 20rpx 200rpx 20rpx;
  /* 减少底部内边距，为tabbar留出更少的空间 */
}

.image-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 10rpx 0 20rpx 0;
}

.banner-image {
  display: block;
  margin: 0 auto 20rpx auto;
  width: 100%;
  max-width: 750rpx;
}

.image-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10rpx;
}

.image-text-container image {
  width: 65rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}

.image-text-container text {
  font-size: 28rpx;
  color: #ffffff;
}

.course-header {
  overflow: hidden;
  margin: 30rpx 0 20rpx 0;
}

.hot-course-title {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  float: left;
}

.more-course {
  font-size: 25rpx;
  color: #cccccc;
  float: right;
}

.hot-container {
  padding: 0rpx;
}

.horizontal-scroll {
  white-space: nowrap;
  width: 100%;
}

.scroll-item {
  display: inline-flex;
  flex-direction: column;
  width: 350rpx;
  margin-right: 20rpx;
  background: #2e2f34;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.item-image {
  width: 350rpx;
  height: 250rpx;
  border-radius: 6rpx 6rpx 0 0;
  display: block;
  margin: 0 5rpx 0 0;
}

.item-desc {
  padding: 10rpx;
  font-size: 29rpx;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-desc:hover {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.tag-container {
  display: flex;
  padding: 0 10rpx 10rpx;
  gap: 8rpx;
}

.tag {
  font-size: 23rpx;
  padding: 4rpx 10rpx;
  background: #3a3b40;
  /* 与背景色类似的颜色 */
  border-radius: 4rpx;
  /* 调整为长方形 */
  color: #ffffff;
}

.scroll-item-coath {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 300rpx;
  height: 400rpx;
  margin-right: 20rpx;
  background: #3a3b40;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.scroll-item-coath .item-image {
  width: 250rpx;
  height: 180rpx;
  border-radius: 6rpx 6rpx 0 0;
  display: block;
  margin: 70rpx auto 0;
  /* 往下调整，居中显示 */
}

.scroll-item-coath .item-image-tag {
  position: absolute;
  top: -25rpx;
  right: -10rpx;
  width: 85rpx;
  height: 85rpx;
  z-index: 2;
}

.scroll-item-coath .item-desc:first-of-type {
  margin-top: 30rpx;
  padding: 0 10rpx;
  font-size: 28rpx;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  /* 添加文本居中对齐 */
}

.scroll-item-coath .item-desc:last-of-type {
  margin-top: 30rpx;
  padding: 0 10rpx 15rpx;
  font-size: 24rpx;
  color: #777882;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  /* 添加文本居中对齐 */
}

.scroll-item-active {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: 350rpx;
  margin-right: 20rpx;
  background: #2e2f34;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.scroll-item-active .item-image {
  width: 350rpx;
  height: 220rpx;
  border-radius: 6rpx 6rpx 0 0;
  display: block;
  /* 往下调整，居中显示 */
}

.scroll-item-active .item-name {
  margin-top: 20rpx;
  padding: 0 10rpx;
  font-size: 28rpx;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  /* 修改为左对齐 */
}

.scroll-item-active .item-time {
  margin-top: 10rpx;
  padding: 0 10rpx 20rpx;
  font-size: 28rpx;
  color: #74767d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  /* 修改为左对齐 */
}

/* 附近门店样式 */
.store-container {
  background-color: #3a3b40;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.store-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.location-icon {
  width: 250rpx;
  height: 250rpx;
  margin-right: 15rpx;
  flex-shrink: 0;
  /* 防止图片在flex布局中被压缩 */
}

.store-container {
  background-color: #3a3b40;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
}

.store-header {
  display: flex;
  align-items: center;
  /* 垂直居中对齐，使文字与图片位置一致 */
  margin-bottom: 15rpx;
  flex: 1;
}

.store-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.store-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.store-name {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
}

.store-distance {
  font-size: 24rpx;
  color: #FFD700;
  margin-right: 10rpx;
  /* 离最右边稍微留一点距离 */
}

.store-address {
  font-size: 26rpx;
  color: #cccccc;
  margin-bottom: 10rpx;
}

/* 附近门店滚动容器样式 */
.store-scroll-container {
  height: 800rpx;
  /* 设置固定高度以启用滚动 */
}

/* 加载状态样式 */
.loading-container,
.no-more-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
}

.loading-text,
.no-more-text {
  font-size: 28rpx;
  color: #cccccc;
}
</style>
